import './foo.js'; // esModule 不支持省略后缀的写法
// import './foo.js'; 多次加载 文件也不会多次执行 只执行一次

import ModuleFoo, { name, filePath } from './foo.js';

// ModuleFoo 为默认导出，如果对应的文件中不通过 export default 导出，那么直接定义变量的形式来接受将报错
console.log(ModuleFoo); // {name: 'foo.js', _name: '__foo.js'}
console.log(name); // 'foo.js'
console.log(filePath); // './src/foo.js'

// ------------------------------------------------

// xxx as xxx 的形式可对分别导出的变量进行重新命名
import { name as _name } from './foo.js';
console.log('_name >>> ', _name); // 'foo.js'

// ------------------------------------------------

// 将导出的值进行聚合，聚合到一个命名变量下，此变量下
// 包含了分别使用 export default 与 exports 语法导出的变量
import * as exportModule from './foo.js';
console.log('exportModule >>> ', exportModule);
/*
  exportModule = {
    default: {
      name: "foo.js",
      _name: "__foo.js"
    },
    filePath: "./src/foo.js",
    name: "foo.js",
    alias: "xxxx foo"
  }

  使用默认导出的方式 被存放到了 default字段下，其他的变量，分别存放在exportModule身上作为其属性

  但是需要注意的是：如果导入的文件中没有使用 export.default 的方式导出，而全部采用 exports的方式导出
  那么我们使用 * 获取全部导出时，对象中就不存在 default属性了 >>> { filePath, name, alias }
*/

// ------------------------------------------------

/*
  exports * 一般用于像utils这种工具库，utils目录下存在很多工具方法，
  而utils下的每一个文件都通过 exports 导出了多个变量
  我们一般会在 utils/index.js 中统一导入所有的 utils多个工具方法
  index.js 作为统一导入时，引用的入口，如：

  utils/date.js
    exports const xxx1 = ...
    exports const xxx2 = ...

  utils/format.js
    exports const xxxA = ...
    exports const xxxB = ...

  utils/index.js > 作为统一入口与出口
    // 统一导出并同时导出
    export * from './date.js'
    export * from './format.js'

  // 使用：
  import { xxx1, xxx2, xxxA, xxxB } from './utils/index.js'
*/

/*
  import xxx from 'xxx.js'

  ..... // import 执行完之前，后续的代码都不会执行，这也就是为啥使用 esModule的方式导入文件都会把导入文件的操作提到文件的首部
*/

console.log(import.meta);
